import React from 'react'
import { Link, useSelector, useIntl, getLocale, setLocale, } from 'umi'
import { Layout, Menu, Dropdown, Avatar, Image, Button } from 'antd';
import styles from './_layout.less';
import { IMenu } from '@/utils/interface';
// import './_layout.less';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
const MainLayout: React.FC = (props) => {
  const { userMenu }: { userMenu: IMenu[] } = useSelector(module => (module as { user: { userMenu: IMenu[] } }).user)
  const { user_name } = useSelector(module=>(module as {user:{userInfo:{user_name:string}}}).user.userInfo)
  const Intl = useIntl()
  const menu = (
    <Menu>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
          个人中心
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
          我的班级
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
          设置
        </a>
      </Menu.Item>
      <Menu.Item danger>
        退出登录
      </Menu.Item>
    </Menu>
  );
  let defaultSelectedKey = userMenu.length ? userMenu[0].children![0].name : '';
  function changeLocale() {
    let locale = getLocale();
    if (locale === 'zh-CN') {
      setLocale('en-US', false);
    } else {
      setLocale('zh-CN', false);
    }
  }
  // if(!userMenu.length){
  //   return null
  // }
  return (
    <Layout className="base-layout" key={userMenu.length}>
      <Button onClick={changeLocale} className={styles.buttons}>{getLocale() === 'zh-CN' ? '英文' : '中文'}</Button>
      <Header className="header">
        <img className={styles.logo} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551624718911&di=4a7004f8d71bd8da84d4eadf1b59e689&imgtype=0&src=http%3A%2F%2Fimg105.job1001.com%2Fupload%2Falbum%2F2014-10-15%2F1413365052_95IE3msH.jpg" alt="" />
        {/* <img className="logo" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551624718911&di=4a7004f8d71bd8da84d4eadf1b59e689&imgtype=0&src=http%3A%2F%2Fimg105.job1001.com%2Fupload%2Falbum%2F2014-10-15%2F1413365052_95IE3msH.jpg" alt=""/> */}
        <Dropdown overlay={menu}>
          <div>
            <Avatar
              src={<Image src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
            />
            <span>{user_name}</span>
          </div>
        </Dropdown>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          {
            <Menu
              mode="inline"
              theme="dark"
              defaultOpenKeys={['sub0']}
              defaultSelectedKeys={['sub'+defaultSelectedKey]}
              style={{ height: '100%', borderRight: 0 }}
            >{
                userMenu.map((item,index) => {
                  return <SubMenu key={'sub'+index} icon={<item.meta.icon />} title={Intl.formatMessage({ id: item.name })}>{
                    item.children?.map(value => {
                      return value.meta.show ? <Menu.Item key={'sub'+value.name}>
                        <Link to={value.path}>{Intl.formatMessage({ id: value.name })}</Link>
                      </Menu.Item> : null
                    })
                  }</SubMenu>
                })
              }
            </Menu>
          }
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >{props.children}</Content>
        </Layout>
      </Layout>
    </Layout>
  );
}
export default MainLayout;


